<template>
<div>
  <div class="content" v-if="breadcrumb != null">
    <div class="top-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{ breadcrumb.brand }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumb.factory }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumb.series }}</el-breadcrumb-item>
        <el-breadcrumb-item v-if="breadcrumb.type_name">{{ breadcrumb.type_name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button class="upload" type="primary" @click="uploadImage">
        上传图片
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
    </div>
    <!-- 外观图列表 -->
    <image-components
      :images="facadeImageList"
      :previewList="facadePreviewList"
      v-on:delImage="delFacadeImage($event)"
    >
      <!-- 插槽部分 -->
      {{ type_name }} <span class="title">外观图</span>
    </image-components>

    <!-- 内饰图列表 -->
    <image-components
      :images="interiorImageList"
      :previewList="interiorPreviewList"
      v-on:delImage="delInteriorImage($event)"
    >
      <!-- 插槽部分 -->
      {{ type_name }} <span class="title">内饰图</span>
    </image-components>

    <!-- 上传组件 -->
    <image-upload ref="imageUpload" @getDataList="getDataList"></image-upload>
  </div>
  <div v-else-if="noneCar">不存在此款车型</div></div>
</template>
<script>
import imageComponents from "./image-list-components.vue";
import ImageUpload from "./image-upload.vue";
export default {
  components: { imageComponents, ImageUpload },
  data() {
    return {
      breadcrumb: null,
      type_name: "",
      carTypeId: "",
      facadeImageList: [],
      interiorImageList: [],
	    finally:false
    };
  },
  beforeRouteEnter(to, from, next) {
    // 以缓存形式存储brand_id 以防F5刷新路由参数：brand_id丢失
    if(from.params.brand_id) {
        localStorage.setItem('brand_id', from.params.brand_id);
    } else {
        to.params.brand_id = localStorage.getItem('brand_id')
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 清除缓存
    localStorage.removeItem('brand_id');
    next();
  },
  methods: {
    async getBreadcrumb() {
      const res = await this.$http.post(
        `/admin/yt_car/index.php?act=yt_car&op=getTitle&brand_id=` +
          this.carTypeId
      );
	  this.finally = true;
      if (res.code == 1 && res.data) {
        this.breadcrumb = res.data;
        this.type_name = res.data.type_name;
      }
    },
    async getFacadeImages() {
      const res = await this.$http.post(
        `/admin/yt_car/index.php?act=yt_car&op=getsImg&brand_id=${this.carTypeId}&type=1`
      );
      if (res.code == 1 && res.data) {
        this.facadeImageList = res.data;
      }
    },
    async getInteriorImages() {
      const res = await this.$http.post(
        `/admin/yt_car/index.php?act=yt_car&op=getsImg&brand_id=${this.carTypeId}&type=2`
      );
      if (res.code == 1 && res.data) {
        this.interiorImageList = res.data;
      }
    },
	getDataList(type){
		if(type==1){
			this.getFacadeImages()
		}else{
			this.getInteriorImages()
		}
	},
    delFacadeImage(index) {
      // console.log(index);
      this.delImage(index, this.facadeImageList);
    },
    delInteriorImage(index) {
      this.delImage(index, this.interiorImageList);
    },
    //删除单个图片
    async delImage(index, imageList) {
      let image = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "操作提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
        }
      ).then(() => {
        //取出当前image数据
        let image = imageList[index];
        //从数组中移除
        imageList.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        return image;
      });
      // console.log(image);

      //请求删除接口
      let res = await this.$http.post(
        `/admin/yt_car/index.php?act=yt_car&op=deleteImage`,
        {
          id: image.id,
          image_list: [image.image_url_old],
        }
      );
      // console.log(res);
    },
    uploadImage() {
      this.$refs.imageUpload.init(this.carTypeId);
    },
  },
  created() {
    this.$parent.tabLists = [
      { label: "厂商品牌", name: "ytcarsBrandModel" },
      { label: "车型车款", name: "ytcarsBrandStyle"},
      { label: "图片上传", name: "ytcarsBrandImage" },
    ];
    this.carTypeId = this.$route.params.carTypeId; //车型ID
    if (this.carTypeId) {
      this.getBreadcrumb();
      this.getFacadeImages();
      this.getInteriorImages();
    }
  },
  computed: {
    //外观大图预览
    facadePreviewList() {
      return this.facadeImageList.map((image) => {
        return image.image_url;
      });
    },
    //内饰大图预览
    interiorPreviewList() {
      return this.interiorImageList.map((image) => {
        return image.image_url;
      });
    },
	//没有车型则展示提示语
	noneCar(){
		return this.finally&&this.breadcrumb===null
	}	
  },
};
</script>
<style lang="scss">
.content {
  .top-breadcrumb {
    padding: 24px 15px 12px;
  }
  .upload {
    float: right;
    margin-top: -16px;
  }
}
.clear::after {
  content: "";
  display: table;
  clear: both;
}
.notfund {
  margin-top: 8%;
  margin-bottom: 8%;
  font-size: 2rem;
  text-align: center;
  color: #808080;
}
</style>